<template>
  <div>
    <a-row :gutter="15">
      <a-col :span="4">
        <a-button type="primary">录入资产</a-button>
      </a-col>
    </a-row>

    <!--    表格区域-->
    <a-table :columns="columns" :data-source="approveList">
      <template #headerCell="{ column }">
        <template v-if="column.key === 'name'">
        <span>
          Name
        </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <a>
            {{ record.name }}
          </a>
        </template>
        <template v-else-if="column.key === 'workflowType'">
        <span>
          <a-tag
              color="blue"
          >
            {{ record.workflowType }}
          </a-tag>
        </span>
        </template>
        <template v-else-if="column.key === 'action'">
        <span>
          <a @click="onApprove(record)">同意</a>
          <a-divider type="vertical"/>
          <a @click="rejectDialog(record)">不同意</a>
        </span>
        </template>
      </template>
    </a-table>

    <a-modal v-model:visible="visible" title="驳回理由" @ok="onReject" :confirm-loading="confirmLoading">
      <a-textarea v-model:value="rejectReason" placeholder="请输入驳回理由" allow-clear/>
    </a-modal>
  </div>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import {approveReq, getApproveList, rejectReq} from "@/apis/approveList";
import {message} from "ant-design-vue";

export default {
  name: "ApprovalList",
  setup() {

    const columns = [{
      title: '资产编号',
      dataIndex: 'assetId',
      key: 'assetId',
    },
      {
        title: '资产名称',
        dataIndex: 'assetName',
        key: 'assetName',
      },
      {
        title: '所属部门',
        dataIndex: 'deptName',
        key: 'deptName',
      },
      {
        title: '价值',
        dataIndex: 'value',
        key: 'value',
      },
      {
        title: '申请类别',
        dataIndex: 'workflowType',
        key: 'workflowType',
      },
      {
        title: '申请理由',
        dataIndex: 'applyReason',
        key: 'applyReason',
      },
      {
        title: '申请人',
        dataIndex: 'userName',
        key: 'userName',
      },
      {
        title: 'Action',
        key: 'action',
      }];

    const approveList = ref([])

    const visible = ref(false);

    const workflowData = ref({})
    const confirmLoading = ref(false);


    const rejectReason = ref('')

    onBeforeMount(() => {
      getApproveList().then(res => {
        approveList.value = res.data;
      })
    })

    const onApprove = (record) => {
      approveReq(record).then(res => {
        if (res.status === '0') {
          message.success("操作成功");
        }
        getApproveList().then(res => {
          approveList.value = res.data;
        })
      })
    }

    const onReject = () => {
      confirmLoading.value = true;
      workflowData.value.rejectReason = rejectReason.value;
      setTimeout(()=>{
        rejectReq(workflowData.value).then(res => {
          if (res.status === '0') {
            message.success("操作成功");
          }
        })
        visible.value = false;
        confirmLoading.value = false;
      },1000)

    }

    const rejectDialog = (record) => {
      workflowData.value = record;
      visible.value = true;
    }

    return {
      columns,
      approveList,
      onApprove,
      onReject,
      visible,
      rejectDialog,
      rejectReason,
      confirmLoading,
    }
  },
}
</script>

<style scoped>

</style>